<script setup lang="ts">
import { onMounted } from 'vue';
import { getSysImgUrl } from '/@/utils/index';
import { Tips as AppNutIconTips } from '@nutui/icons-vue-taro';
import {
  getCurrentInstance,
  showModal,
  showLoading,
  navigateBack,
  showToast,
  setNavigationBarTitle,
} from '@tarojs/taro';
import { formatTimestampStr } from '/@/utils/time';
import { PARK_RECORD_LIST_QUERY } from '/@/api/modules/parking/park-record';
import { DELETE_PARK_CAR } from '/@/api/modules/parking/park-car';
import { state } from './state';
const params = getCurrentInstance().router?.params as {
  plateNo: string;
};
/**
 * 删除车辆信息
 */
function deleteCar() {
  showModal({
    title: '删除车辆',
    content: '您确定要删除车辆吗？',
    success: function (response) {
      if (response.confirm) {
        deleteCarInfo();
      }
    },
  });
}

/**
 * 车辆操作
 */

function deleteCarInfo() {
  showLoading();
  DELETE_PARK_CAR({
    plateNo: decodeURI(params.plateNo),
  }).then((res) => {
    if (res.comResp?.code === 100) {
      showToast({
        title: '删除车辆成功!',
        icon: 'success',
        success: () => {
          setTimeout(() => {
            navigateBack();
          }, 2000);
        },
      });
    } else {
      showToast({ title: '删除车辆失败', icon: 'error' });
    }
  });
}

/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;

  PARK_RECORD_LIST_QUERY({
    comQuery: { page, pageSize },
    plateNo: decodeURI(params.plateNo),
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.parkRecordDto || !res.parkRecordDto.length) return;

      state.list.push(...res.parkRecordDto);
      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  showLoading();
  onLoading();
  setNavigationBarTitle({ title: decodeURI(params.plateNo) });
});
</script>

<template>
  <view class="park-record app-page--1">
    <app-navbar :title="decodeURI(params.plateNo)" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="park-record__wrapper">
        <view class="park-record-item" v-for="item in state.list">
          <nut-avatar shape="square" size="large">
            <image
              v-if="item.vehiclePicUrl"
              :src="getSysImgUrl(item.vehiclePicUrl)"
              class="park-record-item__image"
              mode="aspectFill"
            />
            <app-nut-icon-tips v-else />
          </nut-avatar>
          <view class="park-record-item__center">
            <view class="park-record-item__title">
              <text>{{ item.plateNo }}</text>
            </view>
            <view>
              <text>{{ formatTimestampStr(item.recordTime) }}</text>
            </view>
            <view>
              <text>方向:&nbsp;&nbsp;</text>
              <text>{{ item.recordType === 1 ? '进' : '出' }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </scroll-view>
    <view class="park-record__footer">
      <nut-button block type="danger" @click="deleteCar()"> 删除车辆 </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
